<div id="topbar" class="flex absolute -top-14 right-10">

        @foreach($component->viewports as $viewport)
            @if($viewport == 'desktop')
                <a href="#" id="toggleBottom" class="py-1 px-3 mr-5 font-sans text-sm text-center text-white rounded cursor-pointer bg-neutral-700" title="PC模式">
                    <svg t="1746344116369" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13781" width="24" height="24"><path d="M899.544477 127.981836 123.664507 127.981836c-32.962739 0-59.683311 28.626991-59.683311 63.943334l0 447.601294c0 35.31532 26.720571 63.943334 59.683311 63.943334l358.098841 0-119.366621 191.82898 298.41553 0-119.366621-191.82898 358.098841 0c32.962739 0 59.683311-28.626991 59.683311-63.943334L959.227788 191.925171C959.227788 156.608827 932.508239 127.981836 899.544477 127.981836zM899.544477 575.583131c0 35.31532-26.720571 63.943334-59.683311 63.943334L183.347818 639.526465c-32.962739 0-59.683311-28.626991-59.683311-63.943334L123.664507 255.867482c0-35.31532 26.720571-63.943334 59.683311-63.943334L839.862189 191.924147c32.962739 0 59.683311 28.626991 59.683311 63.943334L899.5455 575.583131z" fill="#ffffff" p-id="13782"></path></svg>
                </a>
            @endif

            @if($viewport == 'mobile')
                <a href="#" id="toggleLayout" class="py-1 px-3 mr-5 font-sans text-sm text-center text-white rounded cursor-pointer bg-neutral-700" title="手机模式">
                    <svg t="1746343268054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1515" width="24" height="24"><path d="M272 85.312v853.376h480V85.312h-480zM232 0h560c22.08 0 40 19.072 40 42.688v938.624c0 23.616-17.92 42.688-40 42.688h-560C209.92 1024 192 1004.928 192 981.312V42.688C192 19.072 209.92 0 232 0z m40 810.688h480v170.624h-480v-170.624z m240 128c22.08 0 40-19.136 40-42.688 0-23.552-17.92-42.688-40-42.688s-40 19.136-40 42.688c0 23.552 17.92 42.688 40 42.688z" fill="#ffffff" p-id="1516"></path></svg>
                </a>
            @endif

            @if($viewport == 'tablet')
                <a href="#" id="toggleTablet" class="py-1 px-3 mr-5 font-sans text-sm text-center text-white rounded cursor-pointer bg-neutral-700" title="平板模式">
                    <svg t="1746343686013" class="icon hover:text-black" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2595" width="24" height="24"><path d="M810.666667 768 213.333333 768 213.333333 256 810.666667 256M896 170.666667 128 170.666667C80.64 170.666667 42.666667 208.64 42.666667 256L42.666667 768C42.666667 814.933333 81.066667 853.333333 128 853.333333L896 853.333333C942.933333 853.333333 981.333333 814.933333 981.333333 768L981.333333 256C981.333333 208.64 942.933333 170.666667 896 170.666667Z" p-id="2596" fill="#ffffff"></path></svg>
                </a>
            @endif
        @endforeach

        <a href="#" id="switchDark" class="py-1 px-3 mr-5 font-sans text-sm text-center text-white rounded cursor-pointer bg-neutral-700" title="暗黑模式切换">
            <svg t="1751439864294" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4769" width="24" height="24"><path d="M529.611373 1023.38565c-146.112965 0-270.826063-51.707812-374.344078-155.225827C51.74928 764.641808 0.041469 639.826318 0.041469 493.815745c0-105.053891 29.693595-202.326012 88.978393-292.22593 59.38719-89.797526 137.000103-155.942569 232.83874-198.63991 6.041111-4.607627 12.184613-3.788493 18.225724 2.252618 7.576986 4.607627 9.931996 11.365479 6.860244 20.580733C322.677735 83.736961 310.493122 142.202626 310.493122 201.589815c0 135.464227 48.328885 251.474031 144.986656 348.131801 96.657771 96.657771 212.667574 144.986656 348.131801 144.986656 74.541162 0 139.252721-11.365479 194.032283-34.19883C1003.684974 655.799424 1009.726084 656.618558 1015.767195 662.659669c7.576986 4.607627 9.931996 11.365479 6.860244 20.580733C983.104241 786.758417 918.802249 869.286132 829.721465 930.925939 740.743072 992.565746 640.706375 1023.38565 529.611373 1023.38565z" p-id="4770" fill="#ffffff"></path></svg>
        </a>

        <a href="#" id="addToFavorite" class="py-1 px-3 mr-5 font-sans text-sm text-center text-white rounded cursor-pointer bg-neutral-700" title="收藏">
            <svg t="1753781398971" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4346" width="24" height="24"><path d="M283.904 869.717333l208.32-108.970666a42.666667 42.666667 0 0 1 39.552 0l208.32 108.970666c2.474667 1.28 4.714667 2.304 6.72 3.072a64.106667 64.106667 0 0 0-0.853333-6.954666l-39.765334-230.784a42.666667 42.666667 0 0 1 12.330667-37.866667l168.533333-163.434667c1.834667-1.792 3.392-3.456 4.650667-4.970666a65.792 65.792 0 0 0-6.890667-1.344l-232.917333-33.685334a42.666667 42.666667 0 0 1-32.128-23.253333L515.626667 160.512a63.36 63.36 0 0 0-3.626667-6.4 63.552 63.552 0 0 0-3.626667 6.4l-104.149333 209.984a42.666667 42.666667 0 0 1-32.128 23.253333L139.2 427.434667c-2.624 0.362667-4.906667 0.832-6.912 1.344 1.28 1.514667 2.816 3.2 4.650667 4.970666l168.533333 163.413334a42.666667 42.666667 0 0 1 12.352 37.888l-39.786667 230.784c-0.448 2.602667-0.725333 4.906667-0.853333 6.954666 2.005333-0.768 4.266667-1.792 6.72-3.072zM512 846.698667l-188.544 98.624c-77.44 40.490667-144.341333-7.978667-129.514667-93.973334l35.946667-208.597333-152.362667-147.754667c-62.848-60.949333-37.12-139.52 49.450667-152.021333l210.773333-30.464 94.186667-189.909333c38.784-78.165333 121.386667-78.08 160.128 0l94.208 189.909333 210.752 30.464c86.656 12.522667 112.234667 91.136 49.450667 152.021333l-152.362667 147.754667 35.946667 208.597333c14.848 86.08-52.16 134.421333-129.493334 93.973334L512 846.72z" fill="#ffffff" p-id="4347"></path></svg>
        </a>

            <a href="#" id="addToProject" class="flex gap-2 items-center justify-center py-1 px-3 mr-5 font-sans text-sm text-center text-white rounded cursor-pointer bg-neutral-700">
                <svg t="1753937750468" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5056" width="24" height="24"><path d="M511.3 734.2c-16.6 0-30-13.4-30-30v-384c0-16.6 13.4-30 30-30s30 13.4 30 30v384c0 16.6-13.4 30-30 30z" fill="#ffffff" p-id="5057"></path><path d="M703.3 542.2h-384c-16.6 0-30-13.4-30-30s13.4-30 30-30h384c16.6 0 30 13.4 30 30s-13.4 30-30 30z" fill="#ffffff" p-id="5058"></path><path d="M512.1 926.2c-55.9 0-110.1-11-161.2-32.6-49.3-20.9-93.6-50.7-131.6-88.7s-67.9-82.3-88.7-131.6C108.9 622.2 98 568 98 512.1s11-110.1 32.6-161.2c20.9-49.3 50.7-93.6 88.7-131.6s82.3-67.9 131.6-88.7C402 108.9 456.2 98 512.1 98s110.1 11 161.2 32.6c49.3 20.9 93.6 50.7 131.6 88.7s67.9 82.3 88.7 131.6c21.6 51.1 32.6 105.3 32.6 161.2s-11 110.1-32.6 161.2c-20.9 49.3-50.7 93.6-88.7 131.6s-82.3 67.9-131.6 88.7c-51.1 21.6-105.3 32.6-161.2 32.6z m0-768.2C316.8 158 158 316.8 158 512.1s158.8 354.1 354.1 354.1 354.1-158.8 354.1-354.1S707.3 158 512.1 158z" fill="#ffffff" p-id="5059"></path></svg>
                <span>添加到项目</span>
            </a>
</div>
